<template>
	<div class="echartsBox">
		<div class="canvas" style="opacity: .5">
		    <iframe frameborder="0" src="/ts/echarts/ddd.html" style="width: 100%; height: 100%"></iframe>
		</div>
		<div class="head">
			<router-link to="/" tag="h1">大数据项目可视化</router-link>
			<div class="weather">
				<!-- <img src="../../assets/img/echartImg/weather.png"><span>多云转小雨</span> -->
				<span id="showTime">{{newDate}}</span>
			</div>
		</div>
		<div class="mainbox">
			<ul class="clearfix">
				<li>
					<div class="boxall">
						<oneZzt id="chart_example" style="height:100%;overflow: hidden;" />
						<div class="boxfoot"></div>
					</div>
					<div class="boxall">
						<twoZzt id="main" style="height:100%;overflow: hidden;"/>
						<div class="boxfoot"></div>
					</div>
					<div class="boxall">
							<threeZxt id="maina" style="height:100%;overflow: hidden;" />
						<div class="boxfoot">

						</div>
					</div>
				</li>
				<li>
					<div class="bar">
						<div class="barbox">
							<ul class="clearfix">
								<li class="pulll_left counter">91961853</li>
								<li class="pulll_left counter">115464646</li>
							</ul>
						</div>
						<div class="barbox2">
							<ul class="clearfix">
								<li class="pulll_left">2021年总支出情况</li>
								<li class="pulll_left">2021年总收入情况</li>
							</ul>
						</div>
					</div>
					<div class="map">
						<div>
							<div class="map1"><img src="../../assets/img/echartImg/lbx.png"></div>
							<div class="map2"><img src="../../assets/img/echartImg/jt.png"></div>
							<div class="map3"><img src="../../assets/img/echartImg/map.png"></div>
							<div class="map4">
								<servenMap id="servenMap" style="height:100%;overflow: hidden;" />
							</div>
							<!-- <fiveZxt  /> -->
						</div>
					</div>
				</li>
				<li>
					<div class="boxall">
							<fiveDashbord id="dash" style="height:100%;overflow: hidden;"></fiveDashbord>
					</div>
					<div class="boxall">
							<sixBo></sixBo>
					</div>
					<div class="boxall">
							<fiveZxt  id="test" style="height:100%;overflow: hidden;" />
					</div>
				</li>
			</ul>
		</div>

	</div>
</template>

<script>
	import oneZzt from "./oneZzt";
	import twoZzt from "./twoZzt";
	import threeZxt from "./threeZxt";
	import fiveDashbord from "./fiveDashbord";
	import fiveZxt from "./fiveZxt";
	import sixBo from "./sixBo.vue"
	import servenMap from "./servenMap.vue"
	export default {
		data() {
			return {
				newDate: new Date()
			}
		},
		components: {
			oneZzt,
			twoZzt,
			threeZxt,
			fiveDashbord,
			fiveZxt,
			sixBo,
			servenMap
		},
		mounted() {
			this.timer = setInterval(() => {
				this.newDate = new Date().toLocaleString()
			})
		},
		// 销毁时清除计时器
		beforeDestroy() {
			if (this.timer) {
				clearInterval(this.timer)
			}
		}
	}
</script>
<style scoped lang="less">
	@font-face {
		font-family: "ZITI";
		src: url(../../assets/font/DS-DIGIT.TTF)
	}
	
	.echartsBox {
		.canvas{position: absolute; width:100%; left: 0; top: 0; height: 99%; z-index: 1;}
		overflow: hidden;
		height: 100vh;
		background: #000d4a url(../../assets/img/echartImg/bg.jpg) center top;
		background-size: cover;
		color: #666;

		.head {
			height: 100px;
			background: url(../../assets/img/echartImg/head_bg.png) no-repeat center center;
			background-size: 100% 100%;
			position: relative;
			z-index: 100;

			h1 {
				color: #fff;
				text-align: center;
				font-size: 35px;
				font-family: "ZITI";
				line-height: 100px;

				img {
					width: 100%;
					display: inline-block;
					vertical-align: middle;
				}
			}

			.weather {
				position: absolute;
				right: 80px;
				top: 15px;

				span {
					color: rgba(255, 255, 255, .7);
					font-size: 20px;
					font-family: "ZITI";
				}
			}
		}

		.mainbox {
			padding: 10px 10px 0 10px;

			>ul>li {
				float: left;
				padding: 0 20px;
				width: 30%;

				.boxall {
					border: 1px solid rgba(25, 186, 139, 0.17);
					padding: 10px;
					margin-bottom: 20px;
					background: rgba(255, 255, 255, 0.04) url(../../assets/img/echartImg/line.png);
					background-size: 100% 100%;
					position: relative;
					z-index: 10;
					height: 250px;

					&:before,
					&:after {
						position: absolute;
						width: 10px;
						height: 10px;
						content: "";
						border-top: 2px solid #02a6b5;
						top: 0;
					}

					&:before {
						border-left: 2px solid #02a6b5;
						left: 0;
					}

					&:after {
						border-right: 2px solid #02a6b5;
						right: 0;
					}

				}

				.boxall:before,
				.boxfoot:before {
					border-left: 2px solid #02a6b5;
					left: 0;
				}

				.boxall:after,
				.boxfoot:after {
					border-right: 2px solid #02a6b5;
					right: 0;
				}

				&:nth-child(2) {
					width: 40%;
					padding: 0;

					.bar {
						background: rgba(101, 132, 226, 0.1);
						padding: 10px;
					}

					.barbox li,
					.barbox2 li {
						width: 50%;
						text-align: center;
						position: relative;
						z-index: 100;
					}

					.barbox {
						.clearfix {
							display: flex;
						}

						&:before,
						&:after {
							position: absolute;
							width: 15px;
							height: 10px;
							content: "";
						}

						&:before {
							border-left: 2px solid #02a6b5;
							left: 0;
							border-top: 2px solid #02a6b5;
						}

						&:after {
							border-right: 2px solid #02a6b5;
							right: 0;
							bottom: 0;
							border-bottom: 2px solid #02a6b5;
						}

						li {
							&:first-child:before {
								position: absolute;
								content: "";
								height: 50%;
								width: 1px;
								background: rgba(255, 255, 255, 0.2);
								right: 0;
								top: 25%;
							}

							font-size: 50px;
							color: #ffeb7b;
							font-family: "ZITI";
							font-weight: bold;
						}

						border: 1px solid rgba(25, 186, 139, 0.17);
						position: relative;
					}

					.barbox2 {
						.clearfix {
							display: flex;

							li {
								font-size: 16px;
								color: rgba(255, 255, 255, 0.7);
								padding-top: 10px;

							}
						}
					}

					.map {
						width: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						height: 640px;
						line-height: 640px;
						margin-top:20px;
						// background-color: royalblue;
						div {
							position: relative;
							margin-top: 2%;
							width: 100%;
							height: 100%;
							.map1,.map2,.map3,.map4{
								position: absolute;
								left: 0; top: 0; right: 0; bottom: 0;
								text-align: center;
								opacity: 0.5;
								margin: 0 auto;
								// transform: translate(-50%, -50%);
							}
							.map1 {
							  z-index: 2;
							    animation: myfirst2  10s infinite linear;
								img{
									width: 80%;
								}
							}
							.map2 {
							  z-index: 3;
							    animation: myfirst 10s infinite linear;
								img{
									width: 75%;
								}
							}
							
							.map3 {
							  z-index: 4;
							  img{
							  	width: 70%;
							  }
							}
							// .map4 {
							// 	height: 100%;
							//   z-index: 5;
							//   opacity: 1;
							// }
							@keyframes myfirst2 {
							  from {
							    transform: rotate(0deg);
							  }
							
							  to {
							    transform: rotate(359deg);
							  }
							}
							
							@keyframes myfirst {
							  from {
							    transform: rotate(0deg);
							  }
							
							  to {
							    transform: rotate(-359deg);
							  }
							}
							
							.map4 {
								width: 100%;
								position: relative;
								top: 4%;
								margin-top: .2rem;
								opacity: 1;
								text-align: center;
								margin: 0 auto;
								z-index: 5;
							}
						}
					}


				}
			}
		}

	}
</style>
